<template>
  <div class="area-modal">
    <el-dialog width="30%" v-model="dialogVisible" :before-close="handleClose">
      <template #header>
        <div class="my-header">
          <div>{{ state.title }}</div>
        </div>
      </template>
      <div class="scheme-box">
        <el-form
          ref="ruleFormRef"
          :model="state.addForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="所属计算区：" prop="zid">
            <el-select v-model="state.addForm.zid" placeholder="所属计算区">
              <el-option
                v-for="(item, index) in state.zoneList"
                :key="index"
                :label="item.reszName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计算节点：" prop="nid">
            <el-select v-model="state.addForm.nid" placeholder="计算节点">
              <el-option
                v-for="(item, index) in state.nodesList"
                :key="index"
                :label="item.host"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组名称：" prop="groupName">
            <el-input
              class="w200"
              v-model="state.addForm.groupName"
              placeholder="请输入组名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="开始断面" prop="startSec">
            <el-select v-model="state.addForm.startSec" multiple placeholder="请选择" filterable>
              <el-option
                :key="index"
                v-for="(item, index) in state.areaList"
                :value="item.blkcd"
                :label="item.blknm"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="结束断面" prop="endSec">
            <el-select v-model="state.addForm.endSec" placeholder="请选择" filterable>
              <el-option
                :key="index"
                v-for="(item, index) in state.areaList"
                :value="item.blkcd"
                :label="item.blknm"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave"> 确定 </el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose, nextTick } from 'vue'
import { addArea, getAreaSecList } from '@/services/modules/compute-methods'
import {
  getResourceZone,
  getResourceNodes,
  // 添加分组
  addResourceGroup,
  // 修改分组
  updateResourceGroupInfos
} from '@/services/modules/base-config.js'
// const props = defineProps({
//   watershedId: {
//     type: Number,
//     default: 1
//   }
// })
const ruleFormRef = ref(null)
onMounted(() => {
  // 查询计算资源分区
  acceptZoneList()
  //查询计算机节点信息
  acceptNodesList()
  // 所有预报断面
  acceptAreaList()
})
const dialogVisible = ref(false)
//
const state = reactive({
  title: '新建计算组',
  // 计算资源分区
  zoneList: [],
  // 计算机节点信息
  nodesList: [],
  // 所有预报断面
  areaList: [],
  addForm: {
    // 资源分区
    zid: '',
    // 节点信息
    nid: '',
    // 分组名称
    groupName: '',
    //  开始断面
    startSec: '',
    // 结束断面
    endSec: ''
  }
})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
//验证
const rules = {
  zid: [{ required: true, message: '请选择计算区', trigger: 'blur' }],
  nid: [{ required: true, message: '请选择计算节点', trigger: 'blur' }],
  groupName: [{ required: true, message: '请输入组名称', trigger: 'blur' }],
  startSec: [{ required: true, message: '请选择开始断面', trigger: 'blur' }],
  endSec: [{ required: true, message: '请选择结束断面', trigger: 'blur' }]
}
// 查询计算资源分区
function acceptZoneList() {
  getResourceZone({ zoneId: 1 }).then((res) => {
    if (res.code == 200) {
      state.zoneList = res.data
    }
  })
}
// 查询计算机节点信息
function acceptNodesList() {
  getResourceNodes().then((res) => {
    if (res.code == 200) {
      state.nodesList = res.data
    }
  })
}
// 获取所有预报断面
function acceptAreaList() {
  getAreaSecList().then((res) => {
    if (res.code == 200) {
      state.areaList = res.data
      state.areaList = [{ blkcd: -1, blknm: '无' }, ...res.data]
    }
  })
}
//保存区域
function handleSave() {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      state.addForm.startSec = state.addForm.startSec.join(',')

      if (state.addForm.id) {
        console.log('修改', state.addForm.id)
        updateResourceGroupInfos(state.addForm).then((res) => {
          if (res.code == 200) {
            handleClose()
            closeDialog()
          }
        })
      } else {
        console.log('新增')
        // state.addForm.zoneId = props.watershedId
        addResourceGroup(state.addForm).then((res) => {
          if (res.code === 200) {
            handleClose()
            closeDialog()
          }
        })
      }
    } else {
      return
    }
  })
}

function handleOpenModal(item) {
  dialogVisible.value = true
  if (item?.id) {
    state.title = '编辑计算组'
    nextTick(() => {
      state.addForm = { ...item }
      console.log(item, '组信息')
      state.addForm.startSec = state.addForm.startSec.split(',')
    })
  } else {
    state.title = '新建计算组'
  }
}
defineExpose({ handleOpenModal })
function handleClose() {
  dialogVisible.value = false
  ruleFormRef.value.resetFields()
}
</script>

<style lang="less" scoped>
.area-modal {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
}
</style>
